<template>
  <div style="margin-top: 10px" class="app-contain">
    <el-row :gutter="50" class="paper-index-header">
      <el-col :span="24">
        <div class="item-contain">
          <span class="title">试卷类型：</span>
          <div class="item-radio">
            <el-radio-group v-model="queryParam.paperType">
              <el-radio
                v-for="item in paperTypeEnum"
                size="mini"
                :key="item.key"
                :label="item.key"
                @click.native.prevent="paperTypeclick(item.key)"
                >{{ item.value }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <div class="item-contain">
          <span class="title">试卷学科：</span>
          <div class="item-radio">
            <el-radio-group v-model="queryParam.subjectId">
              <el-radio
                v-for="item in subjects"
                size="mini"
                :key="item.id"
                :label="item.id"
                @click.native.prevent="subjectTypeclick(item.id)"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <div class="item-contain">
          <span class="title" style="line-height: 35px; margin-bottom: 10px"
            >试卷名称：</span
          >
          <div class="item-radio">
            <el-input
              placeholder="请输入试卷名称"
              v-model="queryParam.examPaperName"
              style="width: 200px"
              @change="examPaperNameChange"
            ></el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-table
        v-loading="listLoading"
        :data="tableData"
        fit
        highlight-current-row
        style="width: 100%"
        ref="singleTable"
        :key="Math.random()"
      >
        <el-table-column prop="id" label="序号" width="90px" />
        <el-table-column prop="name" label="名称" show-overflow-tooltip />
        <el-table-column prop="paperType" label="试卷类型">
          <template slot-scope="{ row }">
            {{ paperTypeEnumFormatter(row.paperType) }}
          </template>
        </el-table-column>
        <el-table-column prop="score" label="试卷总分" />
        <el-table-column prop="questionCount" label="题目数量" />
        <el-table-column prop="suggestTime" label="建议时长(分钟)" />
        <el-table-column
          prop="limitStartTime"
          label="开始时间"
          v-if="queryParam.paperType == 4"
          width="170px"
          
        />
        <el-table-column
          prop="limitEndTime"
          label="结束时间"
          v-if="queryParam.paperType == 4"
          width="170px"
          
        />
        <el-table-column :key="9">
          <template slot-scope="{ row }">
            <router-link
              target="_self"
              :to="{ path: '/do', query: { id: row.id } }"
            >
              <el-button type="primary" size="small">开始答题</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table> -->
    <el-card
      class="el-card"
      style="display: block; margin-top: 15px; padding-left: 60px"
      shadow="always"
      v-loading="listLoading"
    >
      <div v-if="paper && paper.length > 0">
        <a
          target="_self"
          @click="doPaperClick(item.id, item.paperType)"
          v-for="(item, index) in paper"
          :key="index"
        >
          <el-card
            class="el-card-item"
            :body-style="{ padding: '0px 0px 10px 0px' }"
            shadow="hover"
          >
            <el-tooltip placement="top" :content="item.name">
              <div class="index-paper-title">{{ item.name }}</div>
            </el-tooltip>
            <div class="index-paper-item" style="margin-top: 10px">
              学科：{{ subjectFormatter(item.subjectId) }}
            </div>
            <div class="index-paper-item" style="margin-top: 10px">
              试卷类型：{{ paperTypeEnumFormatter(item.paperType) }}
            </div>
            <div class="index-paper-item">
              题目数量：{{ item.questionCount }}
            </div>
            <div class="index-paper-item">试卷总分： {{ item.score }}</div>
            <div class="index-paper-item">
              建议时长：{{ item.suggestTime }} 分钟
            </div>
            <div class="index-paper-item" v-show="item.paperType === 4">
              开始时间：{{ item.limitStartTime }}
            </div>
            <div class="index-paper-item" v-show="item.paperType === 4">
              结束时间：{{ item.limitEndTime }}
            </div>
            <div class="index-paper-item">发布时间：{{ item.createTime }}</div>
            <div
              class="index-paper-item"
              style="display: flex; align-items: center"
            >
              <span>难度：</span>
              <el-rate
                style="line-height: 1.3 !important"
                :value="item.difficult"
                disabled
              >
              </el-rate>
            </div>
          </el-card>
        </a>
        <pagination
          v-show="total > 0"
          :total="total"
          :background="false"
          :page.sync="queryParam.pageIndex"
          :limit.sync="queryParam.pageSize"
          @pagination="search"
          style="margin-top: 20px"
        />
      </div>
      <div class="no-data-layout-index" v-else>
        <img src="@/assets/emptyIndex.png" />
        <div class="none-data-label">暂无内容</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import Pagination from "@/components/Pagination";
import examPaperApi from "@/api/examPaper";
import { scrollTo } from "@/utils/scroll-to";
export default {
  components: { Pagination },
  data() {
    return {
      paper: "",
      queryParam: {
        paperType: "",
        subjectId: "",
        pageIndex: 1,
        pageSize: 12,
        examPaperName: "",
      },
      tabId: "",
      listLoading: true,
      subjectList: [],
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.initSubject();
    this.search();
    scrollTo(0, 800);
  },
  methods: {
    examPaperNameChange() {
      this.search();
    },
    paperTypeclick(e) {
      e === this.queryParam.paperType
        ? (this.queryParam.paperType = null)
        : (this.queryParam.paperType = e);
      this.search();
    },
    subjectTypeclick(e) {
      e === this.queryParam.subjectId
        ? (this.queryParam.subjectId = null)
        : (this.queryParam.subjectId = e);
      this.search();
    },
    doPaperClick(id, paperType) {
      if (window.localStorage.getItem("remainTime" + id)) {
        this.$router.push({ path: "/do", query: { id: id } });
      } else {
        this.$confirm("将要开始考试", "提示", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",

          type: "warning",
        })
          .then(() => {
            this.$router.push({ path: "/do", query: { id: id, paperType: paperType } });
          })
          .catch(() => {});
      }
    },
    search() {
      this.listLoading = true;
      examPaperApi.pageList(this.queryParam).then((data) => {
        const re = data.response;
        this.paper = re.list;
        this.tableData = re.list;
        this.total = re.total;
        this.queryParam.pageIndex = re.pageNum;
        this.listLoading = false;
        // this.$nextTick(() => {
        //   this.$refs.singleTable.doLayout();
        // });
      });
    },
    paperTypeEnumFormatter(status) {
      return this.enumFormat(this.paperTypeEnum, status);
    },
    subjectChange(tab, event) {
      this.queryParam.subjectId = Number(this.tabId);
      this.$nextTick(() => {
        this.search();
      });
    },
    subjectFormatter(status) {
      return this.subjectEnumFormat(this.subjects, status);
    },
    ...mapActions("exam", { initSubject: "initSubject" }),
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapGetters("exam", ["subjectEnumFormat"]),
    ...mapState("enumItem", {
      paperTypeEnum: (state) => state.exam.examPaper.paperTypeEnum,
    }),
    ...mapState("exam", {
      subjects: (state) => state.subjects,
    }),
  },
};
</script>
<style lang="scss" scoped>
.paper-index-header {
  border-bottom: 1px solid rgb(86, 172, 253);
}

.paper-index-header .item-contain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.paper-index-header .title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  display: inline-block;
  width: 85px;
  vertical-align: top;
  margin-bottom: 16px;
  text-align: right;
}
.paper-index-header .item-radio {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.paper-index-header .el-radio {
  margin-right: 24px;
  padding: 2px 8px;
  line-height: 20px;
  border-radius: 4px;
}

/deep/ .paper-index-header .el-radio .el-radio__input {
  display: none;
}
.paper-index-header .is-checked {
  background-color: #56acfd;
}
/deep/ .paper-index-header .is-checked .el-radio__label {
  color: #fff;
}
/deep/ .paper-index-header .el-radio .el-radio__label {
  font-weight: 400;
  padding-left: 0;
}

.el-card {
  overflow: visible;
  cursor: default;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 25px;
  padding-left: 15px;
}
/deep/ .el-collapse-item__header {
  font-size: 14px !important;
}
.index-paper-item {
  margin-bottom: 6px;
  font-size: 14px;
  color: #9b9b9b;
}
.index-paper-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-card-item {
  width: 350px;
  height: 260px;
  display: inline-block;
  margin: 0 15px 15px 15px;
  vertical-align: top;
  cursor: pointer !important;
  border: 3px solid rgb(246, 246, 246);
}
.no-data-layout-index {
  width: 100%;
  text-align: center;
  padding-top: 50px;
}
.no-data-layout-index .none-data-label {
  font-size: 14px;
  color: #9b9b9b;
}
</style>